import { TransformOffset } from './Transform'
import { Color } from './color'

export const calculateColor = (props: {
  offset: TransformOffset
  containerRef: React.RefObject<HTMLDivElement | null>
  targetRef: React.RefObject<HTMLDivElement | null>
  color: Color
}): Color => {
  const { offset, targetRef, containerRef, color } = props

  const { width, height } = containerRef.current!.getBoundingClientRect()
  const { width: targetWidth, height: targetHeight } =
    targetRef.current!.getBoundingClientRect()

  const centerOffsetX = targetWidth / 2
  const centerOffsetY = targetHeight / 2

  const saturation = (offset.x + centerOffsetX) / width
  const lightness = 1 - (offset.y + centerOffsetY) / height
  const hsv = color.toHsv()

  return new Color({
    h: hsv.h,
    s: saturation <= 0 ? 0 : saturation,
    v: lightness >= 1 ? 1 : lightness,
    a: hsv.a
  })
}
export const calculateOffset = (
  containerRef: React.RefObject<HTMLDivElement | null>,
  targetRef: React.RefObject<HTMLDivElement | null>,
  color: Color
): TransformOffset => {
  const { width, height } = containerRef.current!.getBoundingClientRect()
  const { width: targetWidth, height: targetHeight } =
    targetRef.current!.getBoundingClientRect()

  const centerOffsetX = targetWidth / 2
  const centerOffsetY = targetHeight / 2
  const hsv = color.toHsv()
  console.log(
    '%c [ hsv ]-42',
    'font-size:13px; background:pink; color:#bf2c9f;',
    hsv
  )

  return {
    x: hsv.s * width - centerOffsetX,
    y: (1 - hsv.v) * height - centerOffsetY
  }
}
